<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <c:set var="appName" value="${pageContext.request.contextPath}"></c:set>

    <meta charset="UTF-8">
	<title>Insert title here</title>
	
	<meta name="description" content="Basic">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
	<!-- Call App Mode on ios devices -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- Remove Tap Highlight on Windows Phone IE -->
	<meta name="msapplication-tap-highlight" content="no">
	<!-- base css -->
    <link rel="stylesheet" media="screen, print" href="${appName}/css/vendors.bundle.css">
    <link rel="stylesheet" media="screen, print" href="${appName}/css/app.bundle.css">
    <link rel="stylesheet" media="screen, print" href="${appName}/css/formplugins/select2/select2.bundle.css">
    <link rel="stylesheet" media="screen, print" href="${appName}/css/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.css">
    <link rel="stylesheet" media="screen, print" href="${appName}/css/notifications/sweetalert2/sweetalert2.bundle.css">

    <link rel="stylesheet" media="screen, print" href="${appName}/css/lm/bootstrapValidator.css">
    <link rel="stylesheet" media="screen, print" href="${appName}/css/lm/lm.css">

    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" sizes="180x180" href="${appName}/src/img/powered/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="${appName}/src/img/powered/favicon.png">
    <link rel="mask-icon" href="${appName}/src/img/favicon/safari-pinned-tab.svg" color="#5bbad5">

</head>
<body>
   <main id="js-page-content" role="main" class="page-content" style="padding: 0.5rem 2rem;">
	<div class="row">
		<div class="col-xl-12">
			<div id="panel-1" class="panel">
				<div class="panel-hdr" >
                        <a href="javascript:history.go(-1)" target="_self" class="badge badge-light btn-operate"><span class="fal fa-arrow-left mr-1"></span>返回</a>|
                        <span class="badge">${empty user.id?'新增':'编辑'}</span>
				</div>

				<div class="panel-container show">
					<div class="panel-content">
						<form class="col-xl-6" id="form-edit" method="post" action="#">
                            <input type="hidden" id="id" name="id" value="${user.id}">

                            <div class="form-group">
                                <label class="form-label" for="userName">账号</label>
                                <span class="text-danger">*</span>
                                <input type="text" id="userName" autocomplete="off" name="userName" value="${user.userName}"  class="form-control" placeholder="请输入账号，账号唯一">
                             </div>

                            <div class="form-group">
                                <label class="form-label" for="nickName">使用人姓名</label>
                                <span class="text-danger">*</span>
                                <input type="text" id="nickName" autocomplete="off" name="nickName" value="${user.nickName}"  class="form-control" placeholder="请输入使用人姓名">
                             </div>

                             <div class="form-group">
                                 <label class="form-label" for="outlets">使用人网点</label>
<%--                                 <span class="text-danger">*</span>--%>
                                 <select class="select2-placeholder form-control" id="outlets" name="outlets">
                                     <option value=""></option>
                                     <c:forEach items="${outletses}" var="outlets">
                                        <option value="${outlets.id}">${outlets.name}</option>
                                     </c:forEach>
                                 </select>
                             </div>

                            <div class="form-group">
                                <label class="form-label" for="roleIds">角色</label>
<%--                                <span class="text-danger">*</span>--%>
                                <select class="select2-placeholder form-control" id="roleIds" name="roleIds">
                                    <option value=""></option>
                                    <c:forEach items="${roles}" var="role">
                                        <option value="${role.id}" ${not empty user.roleMaps[role.id]?'selected':''}>${role.roleName}</option>
                                    </c:forEach>
                                </select>
                            </div>

                             <div class="form-group" style="text-align: center;">
								<button class="btn btn-primary btn-submit" type="submit">提交</button>
								<a class="btn btn-default btn-operate"  href="javascript:history.go(-1)">返回</a>
							</div>
                         </form>
					</div>
				</div>
			</div>
		</div>
	</div>
  </main>
	<script src="${appName}/js/vendors.bundle.js"></script>
    <script src="${appName}/js/app.bundle.js"></script>
        <!-- datatble responsive bundle contains: 
	+ jquery.dataTables.js
	+ dataTables.bootstrap4.js
	+ dataTables.autofill.js							
	+ dataTables.buttons.js
	+ buttons.bootstrap4.js
	+ buttons.html5.js
	+ buttons.print.js
	+ buttons.colVis.js
	+ dataTables.colreorder.js							
	+ dataTables.fixedcolumns.js							
	+ dataTables.fixedheader.js						
	+ dataTables.keytable.js						
	+ dataTables.responsive.js							
	+ dataTables.rowgroup.js							
	+ dataTables.rowreorder.js							
	+ dataTables.scroller.js							
	+ dataTables.select.js							
	+ datatables.styles.app.js
	+ datatables.styles.buttons.app.js -->
   <script src="${appName}/js/formplugins/select2/select2.bundle.js"></script>
   <!-- Date range use moment.js same as full calendar plugin -->
   <script src="${appName}/js/dependency/moment/moment.js"></script>
   <script src="${appName}/js/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.js"></script>
   <script src="${appName}/js/notifications/sweetalert2/sweetalert2.bundle.js"></script>
   <script src="${appName}/js/lm/bootstrapValidator.js"></script>
   <script src="${appName}/js/lm/lm.js"></script>
    <script>

        $(document).ready(function()
        {
            $('.select2').select2();
            $(".select2-placeholder").select2({
                placeholder: "请选择",
                allowClear: true
            });

            $('#form-edit').bootstrapValidator({
                message: '表单校验',
                fields: {
                    userName: {validators: {notEmpty: {message: '不能为空'}}},
                    nickName: {validators: {notEmpty: {message: '不能为空'}}}
                }
            }).on('success.form.bv', function (e) {//点击提交之后
                // 终止重复提交
                e.preventDefault();
                // 得到form表单对象
                var $form = $(e.target);
                // 获得bootstrap验证对象
                var bv = $form.data('bootstrapValidator');
                // Use Ajax to submit form data 提交至form标签中的action，result自定义

                $.common.ajaxPostJsonSuc("${appName}/user/edit",$("#form-edit").serialize()
                    ,function (data) {
                    location.href= "${appName}/user/list";
                });
            });

        });

    </script>
</body>

</html>